import React, {
	PureComponent
} from 'react';
import {
	LoginWrapper,
	LoginBox,
	Header,
	Container,
	Input,
	Button,
	RememberMe,
	OtherAccount
} from './style';
import {
	connect
} from 'react-redux';

import {
	actionCreators
} from './store';

import { Redirect } from 'react-router-dom';

class Login extends PureComponent {
	render() {
		const { login, loginState } = this.props;
		if(!loginState){
			return (
				<LoginWrapper>
					<LoginBox>
						<Header>
							<div className = 'left'>登录</div>
							<div className = 'right'>注册</div>
						</Header>
						<Container>
							<Input className = 'name' placeholder = '手机号或邮箱' ref = {(input)=>{this.account = input}} />
							<Input className = 'pwd'  placeholder = '密码' type = 'password' ref = {(input)=>{this.password = input}} />
							<RememberMe></RememberMe>
							<Button onClick = { () => {login(this.account, this.password)}} >提交</Button>
							<OtherAccount>其他方式登录</OtherAccount>
						</Container>
					</LoginBox>
				</LoginWrapper>
			)
		} else {
			return <Redirect to='/' />
		}
	}

}

const mapState = (state) => ({
	loginState: state.getIn(['login','login'])
})

const mapDispatch = (dispatch) => ({
	login(accountEle, passwordEle){
		// console.log(accountEle.value, passwordEle.value);
		dispatch(actionCreators.login(accountEle.value, passwordEle.value));
	}
})

export default connect(mapState, mapDispatch)(Login);